<template>
	<view>
		<view class="header">
			<view class="userInfo">
				<view class="image">
					<image class="touxiang" src="@/static/img/tou/tou.jpg"></image>
				</view>
				<view class="user">
					<view class="username">
						<text>用户名/登录</text>
					</view>
					<view class="detail">
						<text>个人简介</text>
					</view>
				</view>
			</view>
			<view class="studyInfo">
				<view class="studyItem">
					<view class="sVal">
						<text>123</text>
					</view>
					<view class="sName">
						<text>统计</text>
					</view>
				</view>
				<view class="studyItem">
					<view class="sVal">
						<text>123</text>
					</view>
					<view class="sName">
						<text>统计</text>
					</view>
				</view>
				<view class="studyItem">
					<view class="sVal">
						<text>123</text>
					</view>
					<view class="sName">
						<text>统计</text>
					</view>
				</view>
			</view>
		</view>
		<view class="icons-content">
			<view class="icons">
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/会员.svg"></image>
					</view>
					<text>会员</text>
				</view>
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/订单.svg"></image>
					</view>
					<text>订单</text>
				</view>
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/打卡.svg"></image>
					</view>
					<text>打卡</text>
				</view>
				<view class="icon">
					<view class="">
						<image src="@/static/img/myInfo/金额.svg"></image>
					</view>
					<text>金额</text>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="tab">
				<view class="tabItem active">
					<text>消息</text>
				</view>
				<view class="tabItem">
					<text>内容</text>
				</view>
				<view class="tabItem">
					<text>历史</text>
				</view>
				<view class="tabItem">
					<text>消息</text>
				</view>
			</view>
		</view>
		<scroll-view class="last-content" refresher-enabled refresher-background="#f5f5f5"
			@refresherrefresh="refreshMsg" :refresher-triggered="isRefreshing" scroll-y="true">
			<view v-if="contentVal==='msg'" class="msgList">
				<view v-for="item in 10" class="msg">
					<view class="img">
						<image src="@/static/img/tou/tou.jpg"></image>
					</view>
					<view class="msgContent">
						<view class="userName">
							李小四
						</view>
						<view class="message">
							<text> 打雷啦，下雨收衣服啊。。。。。。。</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		getUserInfo
	} from '@/api/userApi.js'

	var contentVal = ref("msg")
	var isRefreshing = ref(false)


	onLoad(() => {
		console.log("myinfo")
		// getUserInfo().then(res => {
		// 	console.log(res)
		// })

		uni.setStorageSync('storage_key', 'hello');

		const value = uni.getStorageSync('storage_key');
		if (value) {
			console.log(value);
		}
		const res = uni.getStorageInfoSync();
		console.log(res.keys);
		console.log(res.currentSize);
		console.log(res.limitSize);
	})

	function refreshMsg() {
		isRefreshing.value = true
		console.log("refreshMsg")
		setTimeout(() => {
			isRefreshing.value = false
		}, 1000)

	}
</script>

<style lang="scss">
	.scroll-content::-webkit-scrollbar {
		display: none;
	}

	.touxiang {
		height: 160rpx;
		width: 160rpx;
		border-radius: 100%;
	}

	.icons-content {
		padding: 20rpx 50rpx 30rpx 50rpx;
		border-bottom: rgba(138, 115, 115, 0.05) solid 10rpx;
	}

	.header {
		// background: var(--default-background-color) url("@/static/img/myInfo/juxing4.svg") no-repeat;
		background: var(--default-background-color);
		padding: 10rpx 50rpx 10rpx 50rpx;
		background-position: right;
	}

	.userInfo {
		display: flex;
		flex-direction: row;
		margin: 30rpx 0rpx;

		.user {
			margin-left: 20rpx;

			.username {
				margin: 10rpx 0rpx 20rpx 0rpx;
				font-size: 1.25rem;
			}

			.detail {
				font-size: 0.8rem;
				color: var(--datail-text-color);
			}
		}
	}

	.studyInfo {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 30rpx 0rpx;
		width: 100%;

		.studyItem {
			display: flex;
			flex-direction: column;

			.sName {
				font-size: 1.1rem;
				text-align: center;
			}

			.sVal {
				text-align: center;
				margin-bottom: 10rpx;
			}
		}
	}

	.icons {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 20rpx;

		.icon {
			text-align: center;

			image {
				height: 80rpx;
				width: 80rpx;
			}
		}
	}

	.container {
		padding: 10rpx 50rpx;
	}

	.tab {
		display: flex;
		justify-content: left;

		.tabItem {
			height: 1.5rem;
			line-height: 1.5rem;
			margin-right: 30rpx;
		}

		.active {
			border-bottom: #E8B91F solid 10rpx;
		}
	}

	.last-content {
		padding: 30rpx 50rpx 0rpx 50rpx;
		height: 700rpx;
		overflow-anchor: auto;

		.msgList {
			.msg {
				display: flex;
				margin-bottom: 30rpx;

				.img {
					margin-right: 30rpx;

					image {
						height: 80rpx;
						width: 80rpx;
						border-radius: 100%;
					}

				}

				.msgContent {
					.message {
						font-size: 0.8rem;
						color: var(--datail-text-color);
					}
				}
			}
		}

	}
</style>